:root { --p-font: "Raleway", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; --h-font: "Italiana", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; --header-font-weight: 300; --primary: #29a8df; --primaryRGB: 41, 168, 223; --secondary: #051921; --secondaryRGB: 5, 25, 33; --primary-color: var(--primary, #29a8df); --secondary-color: var(--secondary, #051921); /* nav settings */ --nav-top-bg: rgb(255, 255, 255, 0); --nav-scrolled-bg: #fff; --nav-height: 6rem; --logo-size-lg: 50px; --logo-size-mbl: 50px; /* --logo-top-wht: brightness(0) invert(1); */ --logo-top-op: 1; /* top */ --nav-link-top-clr: #fff; --nav-link-top-hvr-clr: var(--primary); --nav-link-top-border: #fff; --nav-icon-top-clr: #fff; --nav-icon-top-hvr-clr: var(--primary); /* scrolled & pages */ --nav-link-scrolled-clr: var(--secondary); --nav-link-scrolled-hvr-clr: var(--primary); --nav-link-scrolled-border: var(--secondary); --nav-icon-scrolled-clr: var(--primary); --nav-icon-scrolled-hvr-clr: var(--secondary); /* mobile menu */ --menu-link-clr: var(--secondary); --menu-link-border: var(--primary); --menu-footer-bg: var(--secondary); --menu-social-clr: var(--primary); --menu-social-hvr-clr: var(--secondary); /* anna modern reset */ --palette-navigationBackground-color: var(--nav-scrolled-bg); /* hero */ --hero-height-fb: 100vh; --hero-height: 100dvh; --hero-overlay: linear-gradient(45deg, rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.35) 30% 70%, rgb(0, 0, 0, 0.23)); --hero-content-width: 900px; /* title main */ --hero-title-size-lg: 55px; --hero-title-size-mbl: 40px; --hero-title-weight: 300; --hero-title-spacing: ; --hero-title-case: uppercase; --hero-title-clr: #fff; /* title sub */ --hero-sub-size-lg: .3em; --hero-sub-size-mbl: 0.5em; --hero-sub-weight: 400; --hero-sub-spacing: 3px; --hero-sub-font: var(--p-font); --hero-sub-case: uppercase; /* tabs */ --number-of-tabs: 2; --hero-tab-padding: 16px 24px; --hero-tab-txt-size: 16px; --hero-tab-txt-spacing: 1px; --hero-tab-weight: normal; --hero-tab-case: uppercase; /* --hero-tab-border: 1px solid var(--primary); */ --hero-tab-txt-clr: var(--primary); --hero-tab-bg-clr: #fff; --hero-tab-hvr-txt-clr: #fff; --hero-tab-hvr-bg-clr: var(--primary); /* --hero-tab-hvr-border-clr: var(--secondary); */ } /* reg home fix */ #anna-modern-fold { margin-top: calc(var(--nav-height) * -1); } /* live hide */ .home #anna-modern-fold, .home #widget-ctas { display: none; } .home section[data-cy="footer-valuation"] { display: none; } /* anna hide */ .home #search-tabs, .home>section[aria-label="property search hero"] { display: none; } /* Page Resets */ .home #content { width: 100%; padding: 0; } .home .section-width-wrapper { padding: 0 !important; max-width: 100% !important; } .home #sidebar { display: none; } .home>div.lg:px-40 { padding: 0 !important; } .home #content>section { margin: 0 !important; } .home header { position: fixed; } /* modern fixes */ #rg-valuation-iframe-0 { min-height: 25rem !important; } .property-detail-listing-vertical:hover { outline: none !important; } /*  */ /* Fonts */ body *:is(p, li, a, label, legend, button, option, summary) { font-family: var(--p-font) !important; } body *:is(h1, h2, h3, h4, h5, h6, .text-hero) { font-family: var(--h-font) !important; } body h1, body.home h2, body .text-hero { font-weight: var(--header-font-weight); } /* navigation */ .home header.custom-scroll, .pages header, nav.top-nav { box-shadow: 0 1px 8px rgb(0, 0, 0, 0.15); border-bottom: none; } body>header>nav.relative>div.mx-0.pr-2.pl-6.lg\:px-8>div { height: var(--nav-height); } body header #nav-logo { height: var(--logo-size-mbl); } @media (min-width: 768px) { body header #nav-logo { height: var(--logo-size-lg); } } body.home header:not(.custom-scroll) #nav-logo img { filter: var(--logo-top-wht); opacity: var(--logo-top-op); transition: 300ms ease; } body.home header>nav>div:first-child { transition: 300ms ease; } body.home header:not(.custom-scroll)>nav:not(#mobile-menu)>div:first-child { opacity: 1; background-color: var(--nav-top-bg); } .bg-palette-navigationBackground-color.bg-palette-navigationBackground-color { --palette-navigationBackground-color: var(--nav-scrolled-bg) !important; } body.home header { background: transparent; } /* links */ #nav-links>div { justify-content: flex-end; align-items: center; } /* fix ugly border */ header #nav-links a { border: none; padding-bottom: 0.5rem; font-size: 0.9em; font-weight: bold; } header #nav-links a::after { content: ""; position: absolute; bottom: 0; left: 0; /* transform: translateX(-50%); */ width: 0%; height: 2px; background: var(--nav-link-scrolled-hvr-clr); transition: 300ms ease; } header #nav-links a:hover::after { width: 100%; } /* custom banner nav links */ body.home header:not(.custom-scroll) #nav-links a { color: var(--nav-link-top-clr); } body.home header:not(.custom-scroll) #nav-links a:hover { color: var(--nav-link-top-hvr-clr); } body.home header:not(.custom-scroll) #nav-links a:hover::after { background: var(--nav-link-top-border); } /* scrolled and pages nav links */ body.home header.custom-scroll #nav-links a, body.pages header #nav-links a { color: var(--nav-link-scrolled-clr); } body.home header.custom-scroll #nav-links a:hover, body.pages header #nav-links a:hover { color: var(--nav-link-scrolled-hvr-clr); } body.home header.custom-scroll #nav-links a:hover::after, body.pages header #nav-links a:hover::after { background: var(--nav-link-scrolled-border); } nav.top-nav a:hover { color: var(--nav-link-scrolled-hvr-clr); } /* icons */ #nav-icons svg { width: 1.5rem; height: 1.5rem; transition: 300ms ease; } body.home header #nav-icons svg { fill: var(--nav-icon-top-clr); color: var(--nav-icon-top-clr); } body.home header.custom-scroll #nav-icons svg, body.pages header #nav-icons svg { fill: var(--nav-icon-scrolled-clr); color: var(--nav-icon-scrolled-clr); } /* miranda */ .user-contact-icons ul li a svg { width: 1.5rem; height: 1.5rem; fill: var(--nav-icon-scrolled-clr); } .user-contact-icons ul li a:hover, .user-contact-icons ul li a:hover svg { color: var(--nav-icon-scrolled-hvr-clr); fill: var(--nav-icon-scrolled-hvr-clr); } #nav-menu-button svg path { transition: d 300ms ease; } #nav-menu-button svg:hover path { d: path("M 4 8 h 16 M 4 12 h 16 M 4 16 h 16"); } /* miranda fixes */ @media (min-width: 451px) { .user-contact-icons ul { display: flex !important; justify-content: center; align-items: center; } } .user-contact-icons .svg-inline--fa:not(.fa-bars) { display: none; } .user-contact-icons ul li a { line-height: 1; display: flex; justify-content: center; align-items: center; height: 100%; transition: 300ms ease; } .user-contact-icons ul li a:hover svg { transition: 300ms ease; } nav.top-nav a { transition: 300ms ease; } /* mobile menu */ body #mobile-menu>div>div.pl-12.pr-32.pt-16.pb-8.flex.flex-col.h-mobile-nav-inner.sm:h-screen.overflow-y-auto { background-color: var(--palette-navigationBackground-color) !important; height: calc(100vh - 115px); } #mobile-menu .text-palette-navigationLink-color { color: var(--menu-link-clr) !important; transition: 300ms ease; border-bottom: none; padding-bottom: 0.25rem; position: relative; } #mobile-menu .text-palette-navigationLink-color:not(.flex):after { content: ""; display: block; width: 1rem; height: 2px; background-color: var(--menu-link-border); transition: 300ms ease; } #mobile-menu .text-palette-navigationLink-color:not(.flex):hover:after { width: 100%; } #mobile-menu>div>div.pl-12.pr-32.pt-16.pb-8.flex.flex-col.h-mobile-nav-inner.sm:h-screen.overflow-y-auto>div.sm:hidden.pt-9.border-t.border-medium-gray, #mobile-menu>div>div.sm:hidden.p-4.absolute.bottom-0.p-11.text-white.bg-dark-gray.w-full { display: block; } #mobile-menu .bg-dark-gray { background-color: var(--menu-footer-bg); } /* nav social */ #navSocialMedia { gap: 1rem; margin-top: 0 !important; } #navSocialMedia a.social-icon-footer { line-height: 1; color: var(--menu-social-clr); font-size: 0.75em; display: block; transition: 300ms ease; } #navSocialMedia a.social-icon-footer:hover { color: var(--secondary); } /* Hero */ #custom-hero { min-height: var(--hero-height-fb); min-height: var(--hero-height); position: relative; display: grid; background-position: center; background-size: cover; padding-top: 6rem; padding-bottom: 2rem; } .--yt-banner { overflow: hidden; } #hero-yt { position: absolute; top: -60px; left: 50%; width: max(1920px, 100%); height: calc(100% + 60px); object-fit: cover; overflow: hidden; display: flex; justify-content: center; transform: translateX(-50%); .custom__video-background { position: relative; padding-bottom: 56.25%; height: 0; width: 100%; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } } .custom__video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #custom-hero:after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background-image: var(--hero-overlay); } #custom-hero .custom-hero-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; position: relative; z-index: 3; padding-inline: 1rem; width: min(var(--hero-content-width), 100%); left: 50%; transform: translateX(-50%); } #custom-hero img.banner_logo { padding: 1rem; } #custom-hero h1 { text-align: center; letter-spacing: var(--hero-title-spacing); margin: 0; padding: 0; border: none; text-shadow: 1px 1px 0.25rem rgb(0, 0, 0, 0.35); font-size: var(--hero-title-size-mbl); font-weight: var(--hero-title-weight); color: var(--hero-title-clr); text-transform: var(--hero-title-case); line-height: 1; text-wrap: balance; @media (min-width: 768px) { font-size: var(--hero-title-size-lg); text-wrap: wrap; } span.--sub { display: block; font-size: var(--hero-sub-size-mbl); margin-top: .5rem; font-weight: var(--hero-sub-weight); font-family: var(--hero-sub-font); text-wrap: balance; letter-spacing: var(--hero-sub-spacing); text-transform: var(--hero-sub-case); @media (width>768px) { font-size: var(--hero-sub-size-lg); } } } #custom-hero h2 { text-align: center; color: #fff; line-height: 1; margin: 0; padding: 0; margin-top: 1em; } #custom-hero #custom-search-tabs { display: grid; margin-top: 1rem; gap: 1rem; position: relative; z-index: 3; width: 100%; @media (min-width: 768px) { grid-template-columns: repeat(var(--number-of-tabs), 1fr); } a { display: inline-block; line-height: 1; /* text-transform: uppercase; */ letter-spacing: var(--hero-tab-txt-spacing); color: var(--hero-tab-txt-clr); transition: 300ms ease; padding: var(--hero-tab-padding); background-color: var(--hero-tab-bg-clr); text-align: center; font-size: var(--hero-tab-txt-size); font-weight: var(--hero-tab-weight); text-transform: var(--hero-tab-case); border: var(--hero-tab-border); &:hover { color: var(--hero-tab-hvr-txt-clr); background-color: var(--hero-tab-hvr-bg-clr); border-color: var(--hero-tab-hvr-border-clr); } } } .home #custom-hero #react-typeahead { width: 100%; /* margin-top: 1rem; */ max-width: 100%; } /* page updates */ .text-hero { text-shadow: 1px 1px 0.25rem rgb(0, 0, 0, 0.5); } .h-hero-image:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0, 0, 0, 0.2); z-index: 2; } .h-hero-image>div:nth-child(2) { position: relative; z-index: 3; } /* map */ .mapsearch .search-results, .mapsearch .viewport { width: 100%; max-width: 100%; } /* <!-- area page --> */ body>section[aria-label="property search hero"].--hide, #quicksearch-section.--hide { display: none; #react-typeahead { display: none; } } body:not(.home) { #content, #sidebar { margin-top: 30px; } } #--areaMap { width: 100%; min-height: 500px; } #--area { container-type: inline-size; .--area-nav { margin-bottom: 32px; display: grid; gap: 16px; @container (width>550px) { grid-template-columns: repeat(2, 1fr); } @container (width>900px) { grid-template-columns: repeat(4, 1fr); } &>a.area-nav-link { display: block; color: var(--primary-color); background-color: transparent; border: 1px solid var(--primary-color); text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: 300ms ease; position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 8px; line-height: 1; min-height: 42px; &::before { content: ''; position: absolute; top: 0; left: 0; width: 23px; height: 100%; z-index: 2; background-color: var(--primary-color); opacity: 0; transition: 300ms ease; } svg { height: 24px; width: 24px; padding: 8px; border-right: 1px solid; background-color: var(--primary-color); color: #fff; transition: 300ms ease; position: relative; z-index: 3; } span { position: relative; z-index: 3; } &:hover { color: #fff; &::before { opacity: 1; width: 100%; } } } } .--areaSearches { display: grid; gap: 16px; margin-top: 32px; @container (width>550px) { grid-template-columns: repeat(2, 1fr); } @container (width>900px) { grid-template-columns: repeat(4, 1fr); } details.new-accordion summary.new-accordion-title::-webkit-details-marker { display: none } details.new-accordion { overflow: hidden } details.new-accordion summary.new-accordion-title { position: relative; z-index: 2 } details.new-accordion[open]>:not(summary.new-accordion-title) { color: inherit; border-left: none !important; border-right: none !important } details.new-accordion summary.new-accordion-title::after { transform-origin: center; transition: .2s transform ease; content: '\f00d'; font-family: FontAwesome; color: #000; font-size: 16px; line-height: 1rem; transform: rotate(-45deg); } details.new-accordion[open]>summary.new-accordion-title::after { transform: rotate(90deg); transition: transform ease 1s } summary.new-accordion-title { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; } details.new-accordion[open] summary.new-accordion-title, summary.new-accordion-title:hover { padding-left: 16px; background: #f8f8f8; } .new-accordion-content { padding: 10px; border: 1px solid #D7D7D7; border-top: none; background-color: #f8f8f8; } .new-accordion-content ul.list { display: grid; gap: 8px; list-style-type: none; li { width: auto !important; margin: 0; a { display: block; transition: 300ms ease; &:hover { color: #000; } } } @media (width>768px) { &.two_column { grid-template-columns: repeat(2, minmax(0, 1fr)) } } } } } .--loader { position: relative; transition: 500ms ease; &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #E2E2E2; transition: 500ms ease; opacity: 0; } * { position: relative; transition: 500ms ease; opacity: 1; z-index: 2; } } .--loading { &::before { z-index: 3; opacity: 1; } * { z-index: 1; opacity: 0; } } .miranda-wrapper { .--area-nav { margin-top: 16px; border-top: 1px solid #222; padding-top: 16px; } .--areaSearches { ul.list { li { padding: 0; a { color: var(--primary-color); transition: 300ms ease; &:hover { color: var(--secondary-color); } } } } } } /* <!-- market reports --> */ #--market { container-type: inline-size; .--area-nav { margin-bottom: 32px; display: grid; gap: 16px; @container (width>550px) { grid-template-columns: repeat(2, 1fr); } @container (width>900px) { grid-template-columns: repeat(4, 1fr); } &>a.area-nav-link { display: block; color: var(--primary-color); background-color: transparent; border: 1px solid var(--primary-color); text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: 300ms ease; position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 8px; line-height: 1; min-height: 42px; &::before { content: ''; position: absolute; top: 0; left: 0; width: 23px; height: 100%; z-index: 2; background-color: var(--primary-color); opacity: 0; transition: 300ms ease; } svg { height: 24px; width: 24px; padding: 8px; border-right: 1px solid; background-color: var(--primary-color); color: #fff; transition: 300ms ease; position: relative; z-index: 3; } span { position: relative; z-index: 3; } &:hover { color: #fff; &::before { opacity: 1; width: 100%; } } } } } /* <!-- sidebar --> */ .sidebar-link a, .new-accordion-content a { color: var(--secondary-color); transition: 300ms ease; &:hover { color: var(--primary-color); } } #featured-agent-group { display: none; } .sidebar-nav { display: grid; gap: 16px; margin-top: 16px; .sidebar-nav-link { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; em span { display: none; } &:hover { padding-left: 16px; padding-right: 8px; background: #f8f8f8; } } } details.new-accordion summary.new-accordion-title::-webkit-details-marker { display: none } details.new-accordion { overflow: hidden; p.marketHeader { color: #000; font-size: 20px; font-weight: bold; margin-top: 16px; border-bottom: 1px solid; } } details.new-accordion summary.new-accordion-title { position: relative; z-index: 2 } details.new-accordion[open]>:not(summary.new-accordion-title) { color: inherit; border-left: none !important; border-right: none !important } details.new-accordion summary.new-accordion-title::after { transform-origin: center; transition: .2s transform ease; content: '\f00d'; font-family: FontAwesome; color: #000; font-size: 16px; line-height: 1rem; transform: rotate(-45deg); } details.new-accordion[open]>summary.new-accordion-title::after { transform: rotate(90deg); transition: transform ease 1s } summary.new-accordion-title { border: 1px solid transparent; border-bottom-color: #D7D7D7; outline: none; padding: 16px; display: block; padding-left: 0; position: relative; cursor: pointer; transition: 300ms ease; color: #000; font-size: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; } details.new-accordion[open] summary.new-accordion-title, summary.new-accordion-title:hover { padding-left: 16px; background: #f8f8f8; } .new-accordion-content { padding: 10px; border: 1px solid #D7D7D7; border-top: none; background-color: #f8f8f8; } .new-accordion-content ul.list { display: grid !important; gap: 1rem; li { width: auto !important; margin: 0; } @media (width>768px) { &.two_column { grid-template-columns: repeat(2, minmax(0, 1fr)) } } } /* card */ .contact-card { box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .15); border-radius: 1rem; width: min(350px, 100%); position: relative; margin: auto; transition: 250ms ease; padding-top: 1rem; p.cardHeader { color: #000; font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 8px; } } .contact-card::before { content: ""; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 50%; background: linear-gradient(to top, #f6f6f6, transparent); transition: 250ms ease; border-radius: 1rem } .contact-card:hover { cursor: pointer; box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .15), 0 .25rem 0 0 var(--secondary-color) } .contact-card:hover:before { height: 100% } .contact-card>* { position: relative; z-index: 2 } .contact-card img { margin: auto; object-position: top; height: unset !important; padding-left: 1rem; padding-right: 1rem; display: flex } .contact-card h2.agent-name { margin: 0; margin-top: 1rem; margin-bottom: 1.25em; text-align: center; text-transform: uppercase; letter-spacing: 2px } .contact-card .contact-bar { display: grid; grid-template-columns: 1fr 1fr } .contact-card .contact-bar>a { text-align: center; padding: .5rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; transition: 250ms ease; backface-visibility: hidden } .contact-card .contact-bar>a:hover { transform: scale(.95); color: #fff !important } .contact-card .contact-bar>a:target { transform: scale(.95); color: #fff !important } .contact-card .contact-bar>a:focus { transform: scale(.95); color: #fff !important } .contact-card .contact-bar>a { background: var(--primary-color); color: #fff !important } .contact-card .contact-bar>a:nth-child(2) { background: var(--secondary-color); color: #fff !important } .contact-card .social-bar { display: flex; justify-content: space-evenly; align-items: center; padding-block: 1rem } .contact-card .social-bar a { padding: .5rem; display: inline-block; transition: 250ms ease; border-radius: .5rem; color: var(--primary-color); line-height: 1; svg { height: 20px; width: 20px; } } .contact-card .social-bar a:hover { color: #fff !important } .contact-card .social-bar a.facebook-icon:hover { background-color: #3b5999 } .contact-card .social-bar a.instagram-icon:hover { background-color: #e4405f } .contact-card .social-bar a.twitter-icon:hover { background-color: #55acee } .contact-card .social-bar a.youtube-icon:hover { background-color: #cd201f } .contact-card .social-bar a.linkedin-icon:hover { background-color: #0077b5 } .contact-card .social-bar a.pinterest-icon:hover { background-color: #c8232c } .contact-card .social-bar a.google-icon:hover { background-color: #4285f4 } .contact-card .social-bar a.tiktok-icon:hover { background-color: #ff0050 } .contact-card .social-bar a.zillow-icon:hover { background-color: #006AFF; } .contact-card .social-bar a span { display: none } .contact-card .social-bar em { width: 1rem; height: 1rem; font-size: 1rem; display: flex; justify-content: center; align-items: center } .contact-bar:last-child { padding-bottom: 16px; } .contact-card.--lender { p.lenderDetail { font-size: 14px; margin: 0; text-align: center; } .contact-bar { margin-block: 16px; &.--0 { display: none; } &.--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } &.--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } &.--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } } .miranda-wrapper { .sidebar { .social-icons { svg { background-color: transparent !important; } } .contact-card { margin-bottom: 32px; } .mortgage_calculator { margin-top: 32px !important; } } } /* <!-- agents --> */ .agent-page { #content h1 { margin-bottom: 16px; } } #--agentBio { .agentInfo { margin-bottom: 16px; &:has(div:nth-child(2)) { display: flex; gap: 32px; flex-wrap: wrap; } .--agentSocial { display: flex; gap: 16px; flex-wrap: wrap; svg, em { height: 24px; width: 24px; color: var(--primary-color); transition: 300ms ease; &:hover { color: var(--secondary-color); } } } } .--agentCta { display: flex; justify-content: flex-start; margin-top: 16px; &>a.agent-contact-link { display: block; color: var(--primary-color); background-color: transparent; border: 1px solid var(--primary-color); text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: 300ms ease; position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 8px; line-height: 1; &::before { content: ''; position: absolute; top: 0; left: 0; width: 23px; height: 100%; z-index: 2; background-color: var(--primary-color); opacity: 0; transition: 300ms ease; } svg { height: 24px; width: 24px; padding: 8px; border-right: 1px solid; background-color: var(--primary-color); color: #fff; transition: 300ms ease; position: relative; z-index: 3; } span { position: relative; z-index: 3; padding-right: 8px; } &:hover { color: #fff; &::before { opacity: 1; width: 100%; } } } } } /* <!-- rg fixes --> */ .miranda-wrapper { .share-menu-popup { svg { background: none; } } } .search-results .sub-bar svg { margin-right: 8px; } body:not(:has(.miranda-wrapper)) { ul { &[class^="small-block"], &[class^="medium-block"], &[class^="large-block"] { list-style-type: none; } } ul:not(.homeloan) { &.small-block-grid-1 { list-style-type: none; display: grid; gap: 16px; } &.small-block-grid-2 { list-style-type: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } &.medium-block-grid-3 { @media (width>768px) { list-style-type: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } } &.medium-block-grid-2 { @media (width>768px) { list-style-type: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } } &.large-block-grid-3 { @media (width>1024px) { list-style-type: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } } &.large-block-grid-4 { @media (width>1024px) { list-style-type: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } } } }